<script src='https://unpkg.com/vue@2.1.10/dist/vue.js'></script>
<!--css过度最简单的例子1.0的案例2.0不管-->
<div id="app">
<div v-if="show" transition="my-startup">
    {{show}}
</div>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            show:false
        }
    });
</script>
<!--2.0css动画过渡的使用-->
<div id="app2">
<transition name="fade">
<div class="content" v-if="show">123</div>
</transition>
</div>
<script>
    var vm2=new Vue({
        el:'#app2',
        data:{
            show:false
        }
    });
</script>
<!--vue2.0过渡css的实战案例-->
<div id="app3">
        <button @click="show=!show">show</button>
        <transition name="fade">
          <p v-show="show">hello</p>
        </transition>
</div>
<script>
    var vm3=new Vue({
        el:'#app3',
        data:{
            show:false
        }
    });
</script>
<style>
    .fade-enter-active, .fade-leave-active{
        transition: all 0.5s ease  
    }
     
.fade-enter, .fade-leave-active{
    opacity: 0 
}
  
</style>
